<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContextPath() + '/system/'}"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
    <!-- Reset Stylesheet -->
    <link rel="stylesheet" href="resources/css/reset.css" type="text/css"
          media="screen"/>
    <!-- Main Stylesheet -->
    <link rel="stylesheet" href="resources/css/style.css" type="text/css"
          media="screen"/>
    <link rel="stylesheet" href="resources/css/invalid.css" type="text/css"
          media="screen"/>

    <!--                       Javascripts                       -->
    <!-- jQuery -->
    <script type="text/javascript"
            src="resources/scripts/jquery-1.3.2.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript"
            src="resources/scripts/simpla.jquery.configuration.js"></script>

    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/mydialog.js'}"></script>

    <script th:inline="javascript">
        function ping(btn){
            var ip = $("input[name='ip']").val();
            var number = $("input[name='number']").val();

            if(ip.trim() == ""){
                alert("ip不能为空！");
                return;
            }

            if(number.trim() == ""){
                alert("次数不能为空！");
                return;
            }


            if(number < 1 || number > 10){
                alert("次数必须再1到10的范围！");
                return;
            }



            $(btn).html("请稍等...");
            $(btn).attr("disabled", "disabled");
            $("#tab1").html("请稍等...");

            myajax({
                type: "post",
                url: [[${#request.getContextPath()}]] + "/ping",
                data: $("#formid").serialize(),
                success: function(data){
                    $("#tab1").html(data);
                    $(btn).html("ping");
                    $(btn).removeAttr("disabled");
                }
            });
        }
    </script>

</head>
<body>
<div id="main-content">
    <div class="content-box">
        <!-- End .content-box-header -->
        <div class="content-box-content">
            <h2>网络测试</h2>

            <form id="formid">
                <p>
                    IP地址：
                </p>
                <p>
                    <input
                            class="text-input small-input" type="text"
                            name="ip" placeholder="请输入测试的ip地址"/>
                </p>
                <p>
                    次数(1~10)：
                </p>
                <p>
                    <input
                            class="text-input small-input" type="text"
                            name="number" placeholder="请输入测试的次数"/>
                </p>
                <p>
                    <button type="button" class="mybutton" onclick="ping(this);">ping</button>
                </p>
            </form>

            <br/>
            <hr/>
            <br/>

            <div class="tab-content default-tab" id="tab1">

            </div>
        </div>
        <!-- End .content-box-content -->
    </div>
</div>
<!-- End #main-content -->
</body>
</html>